<%@page import="org.proddevplm.dao.data.User"%>
<%@page import="java.util.*"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="org.proddevplm.business.project.constants.ProjectConstants"%>

<script>
	$(function() {
		$( "#startdatepicker" ).datepicker();
		$( "#enddatepicker" ).datepicker();
		$("input:button, input:submit").button();
	});

	$(document).ready(function() {
		$('.hidden').hide(); // hides the divs with class 'hidden'
		$('.details').hide(); //hides the divs with class 'details'
	
		$('#projectName').mouseover(function(){
			$('#projectNameDetails').show();
		});
		
		$('#projectName').mouseout(function(){
			$('#projectNameDetails').hide();
		});

		$('#description').mouseover(function(){
			$('#projectDescription').show();
		});
		
		$('#description').mouseout(function(){
			$('#projectDescription').hide();
		});

		$('#startDate').mouseover(function(){
			$('#startDateDetails').show();
		});
		
		$('#startDate').mouseout(function(){
			$('#startDateDetails').hide();
		});

		$('#endDate').mouseover(function(){
			$('#endDateDetails').show();
		});
		
		$('#endDate').mouseout(function(){
			$('#endDateDetails').hide();
		});

		$('#projectMembers').mouseover(function(){
			$('#projectMembersDetails').show();
		});
		
		$('#projectMembers').mouseout(function(){
			$('#projectMembersDetails').hide();
		});
	
		$('#addM').mouseover(function(){
			$('#addMemberDetails').show();
		});
		
		$('#addM').mouseout(function(){
			$('#addMemberDetails').hide();
		});

		$('#inviteM').mouseover(function(){
			$('#inviteMemberDetails').show();
		});
		
		$('#inviteM').mouseout(function(){
			$('#inviteMemberDetails').hide();
		});


		$('#remMember').mouseover(function(){
			$('#removeMemberDetails').show();
		});
		
		$('#remMember').mouseout(function(){
			$('#removeMemberDetails').hide();
		});

		$('#clrList').mouseover(function(){
			$('#clearListDetails').show();
		});
		
		$('#clrList').mouseout(function(){
			$('#clearListDetails').hide();
		});

		$('#projectRoles').mouseover(function(){
			$('#projectRolesDetails').show();
		});
		
		$('#projectRoles').mouseout(function(){
			$('#projectRolesDetails').hide();
		});

		$('#sRole').mouseover(function(){
			$('#setRoleDetails').show();
		});
		
		$('#sRole').mouseout(function(){
			$('#setRoleDetails').hide();
		});

		$('#clrRole').mouseover(function(){
			$('#removeRoleDetails').show();
		});
		
		$('#clrRole').mouseout(function(){
			$('#removeRoleDetails').hide();
		});

		$('#defineRole').mouseover(function(){
			$('#addRoleDetails').show();
		});
		
		$('#defineRole').mouseout(function(){
			$('#addRoleDetails').hide();
		});
		
		$('.highlight').mouseover(function () {
		    $(this).css("color","black");
		    $(this).css("cursor", "help");
		 });

		$('.highlight').mouseout(function () {
		    $(this).css("color","#555555");	    
		 });

	});

	function checkForm()
	{
		if (document.newProject.projectName.value=='')
		{
			alert('Please insert the name of the project');
			return false;
		}
		else if (document.newProject.description.value=='')
		{
			alert('Please add a description of your project');
			return false;
		}
		else if (document.newProject.startdatepicker.value=='')
		{
			alert('Please select the start date of your project');
			return false;
		}
		else if (document.newProject.enddatepicker.value=='')
		{
			alert('Please select the estimated end date of your project');
			return false;
		}
		else if (checkDate())
		{
			alert('The end date you entered is earlier than the start date of your project');
			return false;
		}
		else if (document.newProject.members.value==null)
		{
			alert('There are no members in your project');
			return false;
		}
		
		onBeforeSubmit();
		return true;
	}
	
	function checkDate(){
				
		var check = false;
		
		var sd = document.newProject.startdatepicker.value;
		var ed = document.newProject.enddatepicker.value;
		var syear = sd.charAt(6)+sd.charAt(7)+sd.charAt(8)+sd.charAt(9);
		var smonth = sd.charAt(0)+sd.charAt(1);
		var sday = sd.charAt(3)+sd.charAt(4);
		var eyear = ed.charAt(6)+ed.charAt(7)+ed.charAt(8)+ed.charAt(9);
		var emonth = ed.charAt(0)+ed.charAt(1);
		var eday = ed.charAt(3)+ed.charAt(4);
				
		if (eyear<syear) check = true;
		else if (eyear==syear){
			if (emonth<smonth) check = true
			else if (emonth==smonth)
				if(eday<sday) check = true;				
		}	
		return check;
	}
	
	function inviteMember()	{
		var name=prompt("Please enter the email for the new member");
		if (name!=null && name!=""){
			document.newProject.members.options[document.newProject.members.options.length] = new Option (name);
		}
	}

	function addRole(){
		var role = document.newProject.newRole.value;
		if (role!=null && role!=""){
			document.newProject.roles.options[document.newProject.roles.options.length] = new Option (role);
		}
	}

	function addMember(){
		for (var i=0; i<document.newProject.users.length; i++){
			if (document.newProject.users.options[i].selected){
				document.newProject.members.options[document.newProject.members.options.length] = new Option (document.newProject.users.options[i].text, document.newProject.users.options[i].value);
			}
		}
	}

	function removeMember(){
		for (var i=0; i<document.newProject.members.length; i++){
			if (document.newProject.members.options[i].selected){
				document.newProject.members.options[i]=null;
			}
		}
	}

	function clearList(){
		var i=0;
		while (document.newProject.members.length!=0)
			document.newProject.members.options[i]=null;
			i++;
	}

	function removeRole(){
		for (var i=0; i<document.newProject.roles.length; i++)
			if (document.newProject.roles.options[i].selected)
				document.newProject.roles.options[i]=null;
	}

	function setRole(){
		for (var i=0; i<document.newProject.roles.length; i++)
			if (document.newProject.roles.options[i].selected){
				for (var j=0; j<document.newProject.members.length; j++){
					if (document.newProject.members.options[j].selected){
						document.newProject.members.options[j] = new Option (document.newProject.members.options[j].text+', '+document.newProject.roles.options[i].value,document.newProject.members.options[j].value);
					}
				}
			}
	}

	function onBeforeSubmit(){
		var members = '';
		var roles = '';
		var index = 0;
		$("#members option").each(function() {
		    if (index++>0) {
				members+=',';	
				roles+=',';	
		    }
		    members+=$(this)[0].value;
		    roles+=$(this)[0].text.split(',')[1];

		})
		
		$('#userlist').val(members);					
		$('#roleslist').val(roles);
		document.forms["newProject"].submit();
	}
	
	function saveProject(){
		checkForm();
	}
		
</script>


<div class="containerBig" style="font-family: verdana; font-size:small; width:auto;">
	<form name="newProject" method="post" action="/proddev/controller">
		<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.PROJECT_MANAGER %>"/>
		<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ProjectConstants.ADD_PROJECT%>"/>
		<input type = "hidden" id="userlist" name = "userlist">
		<input type = "hidden" id="roleslist" name = "roleslist">
		
		<div>
			<div class="pageTitle" style="text-align:center; font-size:medium; height:20px; padding:1%;">
				<b style="float:center">New Project</b>
				<img src="/proddev/images/save.png" onclick="saveProject()" width="30" height="30" style="float:right; margin-right:1%; margin-top:-5px">
				<div style="clear:both"></div>
			</div>
		</div>		
		
		<div style="margin-left: 1%; margin-top: 20px; margin-bottom:10px">
			<div id="leftSide" class="containerSmall" style="width:30%; float:left;">
				<div >
					<div id="projectName" class="highlight" style="width: 200px; ">
						<b>Project name: </b>
					</div>
					<input class="regInput" type="text" name="projectName" style="margin-top:5px; width: 100%">
				</div> 
	
				<div style="margin-top: 10px">
					<div id="description" class="highlight" style="width: 200px; ">
						<b>Description: </b>
					</div>
					<textarea class="regInput" name="description" rows="5" style="width:100%; margin-top:5px"></textarea>
				</div>
	
				<div style="margin-top: 10px">
					<div id="startDate" class="highlight" style="width:200px; float: left; ">
						<b>Select Start date: </b>
					</div>
					<input class="regInput" style="width:80px; float:right" type="text" id="startdatepicker" name="startdatepicker">
					<div style="clear:both;"></div>
				</div>
				
				
				<div style="margin-top: 10px">
					<div id="endDate" class="highlight" style="width:200px; float:left; ">
						<b>Estimated End date: </b> 
					</div>
					<input class="regInput" style="width:80px; float:right" type="text" id="enddatepicker" name="enddatepicker">
					<div style="clear:both;"></div>
				</div>

				<div style="clear:both;"></div>
			</div>
			
			<div class="containerSmall" style="width:30%; margin-left:3%; margin-right:3%; float:left; ">
				<div id="projectMembers" class="highlight" style="width: 200px;">
					<b>Add project members: </b>
				</div>
				<select class="regInput" name="users" style="width:100%; margin-top:5px" size="12">
					<% 
					Map stateMap = (Map)session.getAttribute(ControllerConstants.STATE_MAP);
					List userList = (List)stateMap.get("userlist");
					for (int i=0; i<userList.size(); i++){		
						User user = (User)userList.get(i); %>
						<option value="<%=user.getId() %>" style="font-weight:bold; color:#555555"><%=user.getSurname()+" "+user.getName()%></option>
					<%}	%>
				</select>
				<div style="width:100%">					
					<input id="addM" style="width:40%; margin-top:10px; font-size:small; font-weight: bold; float:left" type="button" name="add" value="Add member" onclick="addMember()">
					<input id="inviteM" style="width:40%; margin-top:10px; font-size:small; font-weight: bold; float:right" type="button" name="invite" value="Invite member" onclick="inviteMember()">
				</div>
				<div style="clear:both;"></div>
			</div>
						
			
						
			<div class="containerSmall" style="width:30%; float:left; ">
				<div id="projectRoles" class="highlight" style="width:200px; ">
					<b>Project roles: </b>
				</div>
				<select class="regInput" name="roles" style="width:100%; margin-top:5px" size="6">
				  	<% 
					List rolesList = (List)stateMap.get("roles");
					for (int i=0; i<rolesList.size(); i++){%>
						<option value="<%=rolesList.get(i)%>" style="font-weight:bold; color:#555555"><%=rolesList.get(i)%></option>
				<%}%>
				</select>
				<div style="margin-top:10px;">
					<input id="sRole" style="width:40%; font-size:small; font-weight: bold; float:left" type="button" name="setR" value="Set role" onclick="setRole()">
					<input id="clrRole" style="width:40%; font-size:small; font-weight: bold; float:right" type="button" name="removeR" value="Remove role" onclick="removeRole()">
					<div style="clear:both;"></div>		
				</div>
			
				<div class="highlight" style="margin-top:10px; width:200px; ">
					<b>Define new role: </b>
				</div>
				<input class="regInput" style="margin-top:5px; width:100%" type="text" name="newRole">
				<input id="defineRole" style="width:40%; margin-top:5px; font-size:small; font-weight: bold;" type="button" value="Add role" onclick="addRole()">
				<div style="clear:both;"></div>		
			</div>	
			<div style="clear:both"></div>
			<div align="center">
				<div class="containerSmall" style="margin-top:30px; width:50%; float:center; ">
					<div class="highlight" style="width:250px; ">
						<b>Project members and roles: </b>
					</div>
					<select class="regInput" id="members" name="members" style="margin-top:5px; width:100%; font-weight:bold; color:#555555" size="7"></select>
					<div style="margin-top:10px;">
						<input id="remMember" style="width:40%; font-size:small; font-weight: bold; float:left" type="button" name="removeM" value="Remove member" onclick="removeMember()">
						<input id="clrList" style="width:40%; font-size:small; font-weight: bold; float:right" type="button" name="clear" value="Clear list" onclick="clearList()">
						<div style="clear:both"></div>
					</div>
				</div>
				<div style="clear:both"></div>			
			</div>
					
			<div style="clear:both;"></div>
		</div>
	</form>
	
	<div id="projectNameDetails" class="details">Please set a <b>name</b>
		for your project. The name of the project can contain both letters and
		numbers.</div>
	
	<div id="projectDescription" class="details">
		In this section, please add a <b>description</b> for the project.
	</div>
	
	<div id="startDateDetails" class="details">Set the <b>start date</b>
		for the project. Click in the predefined area and select the appropriate
		start date from the calendar.</div>

	<div id="endDateDetails" class="details">Set the <b>end date</b>
		for the project. Click in the predefined area and select the appropriate
		end date from the calendar. Please select the end date so that it is
		later than the start date of the project.</div>

	<div id="projectMembersDetails" class="details">In this section you can <b>set the members</b> for your project
		from the users list.</div>

	<div id="addMemberDetails" class="details">Select a name from the users list and then
		push the <b>Add member</b> button. The selected user will appear in the table
		below.</div>
	
	<div id="inviteMemberDetails" class="details">If you want to
		<b>invite</b> other members press the <b>Ivite member</b> button and fill in the email
		address of the person you want to invite</div>

	<div id="removeMemberDetails" class="details">If you want to
		<b>remove a member</b> from the table, select the member that you want to
		remove and click on the <b>Remove member</b> button.</div>

	<div id="clearListDetails" class="details">Press the <b>Clear
		list</b> button to empty the content of the table.</div>

	<div id="projectRolesDetails" class="details">In this section you can <b>set the roles</b> for 
		each member of your project</div>
	
	<div id="setRoleDetails" class="details">Select one member from the <b>Project members and roles </b> table. 
		Select a role from the list and press the <b>Set role</b> button. The new role will appear 
		next to the member in the table below.</div>
		
	<div id="removeRoleDetails" class="details">If you want <b>to remove</b> a Role from the table 
		select the line from the list and press the <b>Remove role</b> button.</div>
		
	<div id="addRoleDetails" class="details">If you want to add an extra role for your project, 
		enter the text in the specified area and then press the <b>Add role</b> button. The new role 
		will appear in the table above. Please use <b>capital letter</b> for the role.</div>

</div>